<template>
	<div>
		<!-- 头部 -->
		<van-nav-bar title="分类" left-arrow :fixed="true" :placeholder='true' @click-left='back' @click-right='search'>
			<template #right>
				<van-icon name="search" size="18" />
			</template>
		</van-nav-bar>

		<van-tabs v-model="activeName" @click='change'>
			<van-tab v-for="(list,index) in tabulation" :title="list.title" :key="index" :name="list.title">

				<van-grid v-if="activeList.length" :border="false" :column-num="2" :center='false'>
					<van-grid-item v-for="(item,index) in activeList" :key='index' @click="ware(item)">
						<van-image :src="item.pic" />
						<div style="height: 2.625rem;"> {{ item.title }} </div>
						<div class="price">￥{{ item.price }} </div>
					</van-grid-item>
				</van-grid>
				<van-empty v-else description="当前分类暂无商品" />
				
			</van-tab>
		</van-tabs>



		<!-- 底部 -->
		<Tabbar></Tabbar>
	</div>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'

	import Tabbar from '@/components/common/Tabbar'

	export default {
		name: 'ClassifyList',
		components: {
			Tabbar
		},
		data() {
			return {
				activeName: '',
				tabulation: []
			}
		},
		methods: {
			//返回上一级路由
			back() {
				this.$router.back()
			},
			//进入搜索页
			search() {
				this.$router.push({
					name: 'searchHistory'
				})
			},
			ware(item){
				console.log(item)
				this.$router.push({name:'ware',query: {ware:JSON.stringify(item)}})
			},

			...mapActions('commodityList', ['change'])

		},
		computed: {
			...mapState('commodityList', ['activeList'])
		},
		mounted() {

			//拿到当前分类的所有标题
			this.tabulation = JSON.parse(this.$route.query.tabulation)
			//拿到当前分类所选中的标题
			this.activeName = JSON.parse(this.$route.query.active)
			//调用change函数，显示当前分类内容
			this.change(this.activeName);
		}
	}
</script>

<style scoped>
	::v-deep .van-nav-bar__content {
		background-color: #A32F2A;
	}

	::v-deep .van-icon-arrow-left,
	::v-deep .van-nav-bar__title,
	::v-deep .van-icon-search {
		color: #FFFFFF;
	}
	.price {
		color: #b0352f;
		font-size: 1.25rem;
	}
</style>
